<template>
    <div>
        <div class="box" v-if="item">
            <img :src="item.picUrl" alt="">
            <div class="zzc"></div>

            <div class="fmxz" :style="{ 'transform': xz }" @click="xzdh">
                <div class="fmxz2">
                    <img :src="item.picUrl" alt="">
                </div>
            </div>
            <div class="gm">
                <div class="gm-l">{{ item.name }}</div>
                <div class="gm-r" v-if="item.song">
                    {{ item.song.artists[0].name }}{{
                        item.song.artists.length == '2' ? ` /
                                        ${item.song.artists[1].name}` : ''
                    }}
                </div>
            </div>

            <!-- 歌词 -->
            <div class="gc" ref="gcgd">
                <div ref="gcgdref" class="jcitem" v-for="(gcjg, index) in jg.gc" :key="index">
                    {{ gcjg }}
                </div>
            </div>
            <!-- 上一首下一首随机 -->
            <div class="huange">
                <!-- 随机 -->
                <svg v-show="sjsx == false" @click="sjsxbf" t="1675822298861" class="icon" viewBox="0 0 1024 1024"
                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11109" width="20" height="20">
                    <path
                        d="M768.863 325.733c-48.775 0-170.409 121.182-259.229 207.077-134.661 130.244-261.862 256.802-363.67 256.802h-62.62C57.75 789.612 37 768.828 37 743.223c0-25.604 20.749-46.387 46.342-46.387h62.622c64.335 0 194.592-129.518 299.256-230.745 127.382-123.198 237.392-233.135 323.643-233.135h59.769l-63.418-61.55c-18.113-18.088-18.142-45.665-0.062-63.788 18.08-18.128 47.422-18.164 65.535-0.07l142.708 142.495A46.306 46.306 0 0 1 987 282.83c0 12.308-4.893 24.06-13.604 32.759l-142.71 142.4c-9.043 9.032-20.89 13.328-32.735 13.328-11.875 0-23.749-4.977-32.799-14.05-18.08-18.121-18.05-48.358 0.062-66.445l63.417-65.09h-59.768z m61.824 238.627c-18.113-18.095-47.456-18.066-65.535 0.062-18.08 18.121-18.05 49.237 0.062 67.323l63.417 65.09h-59.768c-38.06 0-101.643-56.357-164.685-115.353-18.69-17.493-48.021-17.394-65.495 1.306-17.486 18.7-16.507 49.382 2.183 66.87 96.042 89.898 160.826 139.952 227.997 139.952h59.769l-63.418 61.549c-18.113 18.087-18.142 46.552-0.062 64.674 9.051 9.072 20.924 13.167 32.799 13.167 11.845 0 23.692-4.74 32.736-13.773l142.708-142.619c8.71-8.7 13.604-20.56 13.604-32.87a46.44 46.44 0 0 0-13.604-32.842L830.687 564.36zM83.342 325.733h62.622c48.84 0 121.646 62.22 179.612 114.893 8.88 8.065 20.026 12.923 31.147 12.923 12.604 0 25.172-4.677 34.315-14.75 17.208-18.954 15.8-49.839-3.146-67.055-90.646-82.365-166.477-138.787-241.928-138.787H83.342C57.749 232.957 37 253.743 37 279.346s20.75 46.387 46.342 46.387z"
                        fill="#ffffff" p-id="11110"></path>
                </svg>
                <!-- 顺序 -->
                <svg v-show="sjsx" @click="sjsxbf" t="1675844271899" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="16047" width="20" height="20">
                    <path
                        d="M342.69 297.61c-22.96 0-41.3-18.63-41.3-41.32 0-22.67 18.34-41.03 41.3-41.03h457.64c61.35 0 117.2 25.32 157.94 65.49 40.76 40.71 65.73 96.88 65.73 158.23v146.07c0 61.65-24.97 117.52-65.73 158.23-40.73 40.17-96.58 65.46-157.94 65.46H342.69c-61.68 0-117.52-25.29-158.23-65.46-36.09-36.62-60.52-85.52-64.6-139.06h-95.4C11.09 604.22 0 592.88 0 579.52c0-6.71 2.93-13.1 7.57-17.16l67.21-67.82 67.8-67.48c9.29-9.59 24.73-9.59 34.32 0h0.56l67.5 67.48 67.21 67.82c9.58 9.29 9.58 25 0 34.91-5.24 4.65-12.22 7.57-19.23 6.95h-91.02c4.05 31.15 18.9 59.66 40.11 80.9h0.3c25.88 25.59 61.41 41.56 100.37 41.56h457.64c38.66 0 74.16-15.98 99.75-41.56C925.97 659.53 942 624.01 942 585.05V438.98c0-38.96-16.03-74.46-41.91-100.05-25.59-25.91-61.09-41.32-99.75-41.32H342.69zM187.63 555.35h47.74l-25.32-25.88v-0.27l-50.32-50.05-50.34 50.05v0.27L83.8 555.35h103.83z"
                        fill="#ffffff" p-id="16048"></path>
                </svg>

                <!-- 上一首 -->
                <svg @click="djsys" t="1675821690987" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2321" width="40" height="40">
                    <path
                        d="M256 224a32 32 0 0 1 32 32v512a32 32 0 0 1-64 0V256a32 32 0 0 1 32-32z m385.952 30.624a96 96 0 0 1 157.44 73.76v366.72a96 96 0 0 1-157.44 73.76l-220.032-183.36a96 96 0 0 1 0-147.52z m86.048 53.28a32 32 0 0 0-45.056-4.096l-220.032 183.36a32 32 0 0 0-4.096 4.096l-2.4 3.232a32 32 0 0 0 6.496 41.824l220.032 183.36a32 32 0 0 0 52.48-24.576v-366.72a32 32 0 0 0-7.424-20.48z"
                        fill="#ffffff" p-id="2322"></path>
                </svg>
                <!-- 播放暂停 -->
                <svg v-show="bfzt" @click="xzdh" t="1675840582876" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="14199" width="40" height="40">
                    <path
                        d="M512 1024C228.266667 1024 0 795.733333 0 512S228.266667 0 512 0s512 228.266667 512 512-228.266667 512-512 512z m0-42.666667c260.266667 0 469.333333-209.066667 469.333333-469.333333S772.266667 42.666667 512 42.666667 42.666667 251.733333 42.666667 512s209.066667 469.333333 469.333333 469.333333z m-106.666667-682.666666c12.8 0 21.333333 8.533333 21.333334 21.333333v384c0 12.8-8.533333 21.333333-21.333334 21.333333s-21.333333-8.533333-21.333333-21.333333V320c0-12.8 8.533333-21.333333 21.333333-21.333333z m213.333334 0c12.8 0 21.333333 8.533333 21.333333 21.333333v384c0 12.8-8.533333 21.333333-21.333333 21.333333s-21.333333-8.533333-21.333334-21.333333V320c0-12.8 8.533333-21.333333 21.333334-21.333333z"
                        fill="#ffffff" fill-opacity=".9" p-id="14200"></path>
                </svg>
                <svg v-show="bfzt == false" @click="xzdh" t="1675844080077" class="icon" viewBox="0 0 1024 1024"
                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15199" width="40" height="40">
                    <path
                        d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m0 981.333333C253.866667 981.333333 42.666667 770.133333 42.666667 512S253.866667 42.666667 512 42.666667s469.333333 211.2 469.333333 469.333333-211.2 469.333333-469.333333 469.333333z"
                        fill="#ffffff" p-id="15200"></path>
                    <path
                        d="M672 441.6l-170.666667-113.066667c-57.6-38.4-106.666667-12.8-106.666666 57.6v256c0 70.4 46.933333 96 106.666666 57.6l170.666667-113.066666c57.6-42.666667 57.6-106.666667 0-145.066667z"
                        fill="#ffffff" p-id="15201"></path>
                </svg>

                <svg @click="jssj" t="1675821993591" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="4720" width="40" height="40">
                    <path
                        d="M768 224a32 32 0 0 1 32 32v512a32 32 0 0 1-64 0V256a32 32 0 0 1 32-32z m-386.336 31.36l220.032 183.36a96 96 0 0 1 0 147.52l-220.032 183.36a96 96 0 0 1-157.44-73.76v-366.72a96 96 0 0 1 157.44-73.76zM295.616 308.64a32 32 0 0 0-7.424 20.48v366.72a32 32 0 0 0 52.48 24.576l220.032-183.36a32 32 0 0 0 6.496-41.824l-2.4-3.264a32 32 0 0 0-4.096-4.096l-220.032-183.36a32 32 0 0 0-45.056 4.128z"
                        fill="#ffffff" p-id="4721"></path>
                </svg>
                <svg @click="dklb" t="1675822139355" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="5756" width="20" height="20">
                    <path
                        d="M98.357122 818.73194c-14.213723 0-25.764803 11.532661-25.764803 25.76071 0 14.233166 11.55108 25.770943 25.764803 25.770943M922.866648 818.73194 98.128925 818.73194c-14.21884 0-25.770943 11.532661-25.770943 25.76071 0 14.233166 11.552104 25.770943 25.770943 25.770943l824.737724 0c14.213723 0 25.764803-11.538801 25.764803-25.770943C948.633498 830.262554 937.081395 818.73194 922.866648 818.73194zM98.357122 483.770052c-14.213723 0-25.764803 11.537777-25.764803 25.76992 0 14.229073 11.55108 25.764803 25.764803 25.764803M922.866648 483.770052 98.128925 483.770052c-14.21884 0-25.770943 11.537777-25.770943 25.76992 0 14.229073 11.552104 25.764803 25.770943 25.764803l824.737724 0c14.213723 0 25.764803-11.537777 25.764803-25.764803C948.633498 495.307829 937.081395 483.770052 922.866648 483.770052zM98.357122 148.815327c-14.213723 0-25.764803 11.539824-25.764803 25.768897 0 14.227026 11.55108 25.76378 25.764803 25.76378M98.128925 200.346981l824.737724 0c14.213723 0 25.764803-11.536754 25.764803-25.76378 0-14.229073-11.55108-25.768897-25.764803-25.768897L98.128925 148.814304c-14.21884 0-25.770943 11.539824-25.770943 25.768897C72.359005 188.81125 83.911108 200.346981 98.128925 200.346981z"
                        fill="#ffffff" p-id="5757"></path>
                </svg>
                <!-- 列表 -->
                <div class="lbbox" v-show="lbdk">
                    <div class="lbgd" v-for="(item, index) in jg.syg" :key="index" @click="djlb(index)">
                        <div class="lbgd-l">{{ item.name }}</div>
                        <div class="lbgd-r">{{ item.song.artists[0].name }}</div>
                    </div>
                </div>
            </div>
            <div class="mp3">
                <audio autoplay controls ref="bfyp" @play="bfs" @pause="zts" @ended="jssj" @timeupdate="hdgb">
                    <source :src="jg.url" type="audio/mpeg">
                </audio>
            </div>
            <input class="jdtjdtjdt" type="range" ref="ysjdt" @input="inputsjsj" @change="sbdx" value="0" name="" id="">
            <div class="gcgcgc">{{ gcwz }}</div>
            <div class="zsc">{{ zsc }}</div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name: 'Bfymb',
    data() {
        return {
            bfzt: false,
            ms: 0,
            xz: '',
            timer: '',
            flag: true,
            jg: {
                url: '',
                item: {},
                gc: [],
                gcsjsj: [],
                i: 0,
                syg: {},
            },
            timer2: '',
            scrollTop: 0,
            lbdk: false,
            gqnum: 0,
            zcms: true,
            sjms: false,
            sjsx: true,
            // 进度条百分比
            jdtbfb: '0%',
            gcwz: '',
            zsc: '',
            abcd: true
        }
    },
    methods: {
        inputsjsj() {
            if (this.abcd) {
                this.abcd = false
            }
        },
        sbdx() {
            this.$refs.bfyp.currentTime = ((parseFloat(this.$refs.ysjdt.value).toFixed(0) - 0) / 100) * this.$refs.bfyp.duration
            if (this.abcd == false) {
                this.abcd = true
            }

        },
        // 随机顺序播放
        sjsxbf() {
            this.sjsx = !this.sjsx
            this.zcms = !this.zcms
            this.sjms = !this.sjms
        },
        djsys() {

            if (this.zcms) {
                if (this.gqnum - 1 >= 0)
                    this.djlb(this.gqnum - 1)
            }
            else if (this.sjms) {
                // 随机播放
                this.djlb(Math.floor(Math.random() * this.jg.syg.length))
            }
        },
        jssj() {
            if (this.zcms) {
                if (this.gqnum + 1 < this.jg.syg.length)
                    this.djlb(this.gqnum + 1)
            }
            else if (this.sjms) {
                // 随机播放
                this.djlb(Math.floor(Math.random() * this.jg.syg.length))
            }
            this.$refs.ysjdt.value = 0
            this.jdtbfb = "0%"
        },
        djlb(index) {
            this.gqnum = index
            this.jg.item = this.jg.syg[index]
            axios({
                method: 'post',
                url: `http://localhost:3000/song/url?id=${this.jg.item.id}`,
            }).then((response) => {
                axios({
                    method: 'post',
                    url: `http://localhost:3000/lyric?id=${this.jg.item.id}`,
                }).then((gcjg) => {
                    let gc = gcjg.data.lrc.lyric
                    let url = response.data.data[0].url

                    localStorage.setItem('urlmb', JSON.stringify(url))
                    localStorage.setItem('itemmb', JSON.stringify(this.jg.item))
                    localStorage.setItem('gcmb', JSON.stringify(gc))


                    // this.zts()

                    this.jg.url = JSON.parse(localStorage.getItem('urlmb'))
                    this.$refs.bfyp.src = this.jg.url
                    // this.bfs()

                    this.gclj()
                });
            });;
        },
        dklb() {
            this.lbdk = !this.lbdk
        },
        xzdh() {
            // 获取音频时长
            // console.log(this.$refs.bfyp.duration);
            // console.log(this.$refs.bfyp.currentTime);
            // let percent = this.$refs.bfyp.duration / 100
            clearInterval(this.timer)
            this.flag = !this.flag

        },
        bfs() {

            // // percentage
            this.bfzt = true


            clearInterval(this.timer)
            this.timer = setInterval(() => {
                this.ms += 0.1
                this.xz = `rotate(${this.ms}deg)`
            }, 1);
            this.gcsj()
        },
        zts() {

            this.bfzt = false
            clearInterval(this.timer)
            clearInterval(this.timer2)
        },
        gcsj() {
            this.timer2 = setInterval(() => {
                if (this.$refs.bfyp) {
                    let num = this.$refs.bfyp.currentTime + ''
                    num = num.split('.')[0] - 0
                    this.jg.gcsjsj.forEach((e, k) => {
                        if (num == e) {
                            for (let i = 0; i < this.$refs.gcgdref.length; i++) {
                                this.$refs.gcgdref[i].style.color = 'white'
                                this.$refs.gcgdref[i].style.fontSize = '14px'
                            }
                            this.$refs.gcgdref[k].style.color = 'red'
                            this.$refs.gcgdref[k].style.fontSize = '18px'
                            this.$refs.gcgd.scrollTop = this.$refs.gcgdref[k].offsetTop - 50
                        }
                    })
                }
            }, 1000);
        },
        gcsj() {
            this.timer2 = setInterval(() => {
                if (this.$refs.bfyp) {
                    let num = this.$refs.bfyp.currentTime + ''
                    num = num.split('.')[0] - 0
                    this.jg.gcsjsj.forEach((e, k) => {
                        if (num == e) {
                            for (let i = 0; i < this.$refs.gcgdref.length; i++) {
                                this.$refs.gcgdref[i].style.color = 'white'
                                this.$refs.gcgdref[i].style.fontSize = '14px'
                            }
                            this.$refs.gcgdref[k].style.color = 'red'
                            this.$refs.gcgdref[k].style.fontSize = '18px'
                            this.$refs.gcgd.scrollTop = this.$refs.gcgdref[k].offsetTop - 50
                        }
                    })
                }

            }, 1000)
        },
        hdgb() {
            if (this.abcd) {
                this.$refs.ysjdt.value = ((this.$refs.bfyp.currentTime / this.$refs.bfyp.duration).toFixed(2) - 0) * 100
            }
            let bfb = ((this.$refs.bfyp.currentTime / this.$refs.bfyp.duration).toFixed(2) - 0) * 100

            if (bfb != NaN) {
                this.jdtbfb = bfb + "%"
            }
            this.gcsj()
            // 分钟
            let timeCount = Math.floor(this.$refs.bfyp.currentTime) // 总时长秒数
            let minutes = parseInt(this.$refs.bfyp.duration / 60); // 获取总时长分钟
            let seconds = parseInt(this.$refs.bfyp.duration % 60); // 获取总时长秒数
            let timeMinute = Math.floor(timeCount / 60) // 当前播放进度 分
            let timeDisplay = Math.floor(this.$refs.bfyp.currentTime % 60); // 当前播放进度 秒
            let secondsTime = timeDisplay < 10 ? '0' + timeDisplay : timeDisplay // 秒
            this.gcwz = timeMinute + ':' + secondsTime
            this.zsc = minutes + ":" + seconds

        },
        gclj() {
            if (JSON.parse(localStorage.getItem('gcmb'))) {
                let item = JSON.parse(localStorage.getItem('gcmb')).split('\n')
                let gc = []
                let sj = []
                let newSj = []
                item.forEach((e) => {
                    gc.push(e.split(']')[1])
                    sj.push(e.split(']')[0].split('[')[1])
                })
                sj = sj.slice(0, sj.length - 1)
                this.jg.gc = gc.slice(0, gc.length - 1)
                sj.forEach((e) => {

                    let item = e.split(':')
                    newSj.push(((item[0] - 0) * 60) + (item[1].split('.')[0] - 0))
                })
                this.jg.gcsjsj = newSj
            }
        }
    },
    computed: {
        item() {
            return this.jg.item
        }
    },
    watch: {
        flag() {
            if (this.flag) {
                clearInterval(this.timer)
                this.timer = setInterval(() => {
                    this.ms += 0.1
                    this.xz = `rotate(${this.ms}deg)`
                }, 1);
                this.$refs.bfyp.play()
            } else {
                clearInterval(this.timer)
                this.$refs.bfyp.pause()
            }
        }
    },
    activated() {

        this.$router.push({
            name: 'Bfymb',
        }, () => { })
        this.jg.url = JSON.parse(localStorage.getItem('urlmb'))
        this.jg.item = JSON.parse(localStorage.getItem('itemmb'))
        this.$refs.bfyp.src = this.jg.url
        // 所有歌yhglsj2
        this.jg.syg = JSON.parse(localStorage.getItem('yhglsj2'))
        this.gclj()

    },
}
</script>

<style>
.jdtjdtjdt {
    position: absolute;
    top: 539px;
    width: 268px;
    left: 51px;
}

.box {
    width: 100%;
    height: 700px;
    position: relative;
}

.box>img {
    width: 100%;
    height: 100%;
    position: absolute;
    filter: blur(10px);
}

.zzc {
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0, .6);
    position: absolute;
}

.fmxz {
    width: 257px;
    height: 257px;
    background-color: rgb(255, 255, 255, .1);
    position: absolute;
    left: calc(50% - 123.5px);
    top: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fmxz2 {
    width: 93%;
    height: 93%;
    background-color: rgb(0, 0, 0);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fmxz img {
    width: 70%;
    height: 70%;
    border-radius: 50%;
}

.gm {
    padding: 0 10px;
    width: 94%;
    height: 20px;
    position: absolute;
    top: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.gm-l {
    box-sizing: border-box;
    padding: 10px 0;
    font-size: 16px;
    color: #fefefe;
    margin-right: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gm-r {
    font-size: 16px;
    color: hsla(0, 0%, 100%, .6);
}

.gc {
    width: 100%;
    height: 130px;
    position: absolute;
    top: 390px;
    left: 0;
    overflow-y: scroll;
}

.mp3 {
    width: 100%;
    height: 50px;
    position: absolute;
    top: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* opacity: 0; */
    display: none;
}

.mp3 audio {
    width: 350px;
    height: 30px;
}

.jcitem {
    width: 100%;
    padding: 3px 0;
    text-align: center;
    font-size: 14px;
}

.huange {
    width: 100%;
    height: 50px;
    position: absolute;
    top: 580px;
    display: flex;
    justify-content: space-around;
    background-color: rgba(255, 255, 255, 0.1);
    align-items: center;
    position: relative;
}

.lbbox {
    height: 450px;
    width: 300px;
    position: absolute;
    top: -450px;
    right: 0;
    background-color: rgba(255, 255, 255, 0.7);
    overflow: auto;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 30px;
}

.jdt {
    box-sizing: border-box;
    width: 70%;
    height: 20px;
    position: absolute;
    left: 15%;
    top: 490px;
    position: relative;
}

.gcgcgc {
    width: 32px;
    height: 30px;
    position: absolute;
    color: white;
    top: 538px;
    left: 12px;
}

.zsc {
    width: 32px;
    height: 30px;
    position: absolute;
    color: white;
    top: 538px;
    right: 12px;
}

.jdtdb {
    position: absolute;
    width: 100%;
    height: 10px;
    background-color: white;
    top: 5px;
    border-radius: 20px;
    z-index: 9;
}

.jdtqm {
    position: absolute;
    width: 0%;
    height: 10px;
    background-color: rgb(2, 154, 255);
    top: 5px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    z-index: 99;
}

.jdtyd {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 20px;
    left: 0%;
    z-index: 999;
    pointer-events: none;
}

.el-progress-bar {
    padding: 0;
}

.lbgd {
    height: 35px;
    line-height: 35px;
    display: flex;
}


.lbgd-l {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 2;
}

.lbgd-r {
    height: 35px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    box-sizing: border-box;
    padding-left: 10px;
}
</style>